<template>
  <main class="add_main">
    <h4 style="font-size:22px;color:#454a5b;">我要发帖</h4>
    <div style="margin-top: 15px; width:50%;">
      <el-input
        placeholder="注意：标题最多15个字"
        v-model="sendPost.title"
        class="input-with-select"
        maxlength="15"
        show-word-limit
      >
        <el-select v-model="value" slot="prepend" placeholder="请选择" style="width:110px;">
          <el-option
            v-for="item in college"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeName"
          ></el-option>
        </el-select>
      </el-input>
    </div>
    <div style="margin:5px 0;font-size:12px"></div>
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="sendPost.content"
      maxlength="200"
      show-word-limit
      style="width:60%;"
      rows="8"
    ></el-input>
    <div style="margin:10px 0;"></div>
    <el-button type="primary" @click="sendPostM()" :disabled="isTitle||isContent">发布帖子</el-button>
  </main>
</template>
<script>
export default {
  props: ['username'],
  data() {
    return {
      college: [], // 部门
      value: '信息工程',
      sendPost: {
        publisher: '', // 发布者
        title: '', // 标题
        content: '', // 内容
        pubDate: '', // 发布时间
        collegeId: 0 // 部门号
      },
      isTitle: true,
      isContent: true
    }
  },
  created() {
    this.comm.getcollege(this).then(data => {
      this.college = data
    })
  },
  methods: {
    // 发布帖子
    async sendPostM() {
      this.sendPost.pubDate = this.comm.timeFilter()
      this.sendPost.publisher = this.username
      const res = await this.$http.post('/sendPost', this.sendPost)
      if (res.meta.status !== 200) {
        return this.$Message.error('发布帖子失败，请重试！')
      }
      this.comm
        .editInteg(this.username, 'integ.post', 1)
        .then(data => {
          if (!data) {
            return this.$Message.error('服务器出错！')
          }
          this.$Message.success('发布帖子积分+1')
          this.$router.push('/home')
        })
    }
  },
  watch: {
    value: function(val, oval) {
      this.college.forEach(item => {
        if (item.collegeName === val) {
          this.sendPost.collegeId = item.collegeId
        }
      })
    },
    'sendPost.title': function(val) {
      this.isTitle = val.trim().length ? false : true
    },
    'sendPost.content': function(val) {
      this.isContent = val.trim().length ? false : true
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  width: 100%;
  .add_main {
    width: 94%;
    margin: 0 auto;
    height: 400px;
  }
}
</style>
